<template>
  <div class="bill-setting">
    <div class="button-container">
      <el-button type="primary" @click="addNewBookClick">新增账本</el-button>
    </div>

    <el-table
        :data="billStore.billBookList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        style="width: 100%"
        class="card-item">
      <el-table-column type="index" align="center" width="50"/>
      <el-table-column prop="name" label="名称" align="center" width="100"/>
      <el-table-column label="图标" align="center" width="80">
        <template #default="scope">
          <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editBookClick(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteBookClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="billInfo.billBookDialog.visible"
               :title="billInfo.billBookDialog.title"
               center width="80%" @open="openDialogEvent">
      <el-form ref="formRef" :model="billInfo.billBookDialog.data"
               :rules="rules" label-position="top" label-width="100px">
        <el-form-item label="账本名称" prop="name">
          <el-input v-model="billInfo.billBookDialog.data.name" autocomplete="off"
                    placeholder="请输入类型名称"
                    :maxlength="10" show-word-limit/>
        </el-form-item>
        <el-form-item label="类型图标" prop="icon">
          <el-input v-model="billInfo.billBookDialog.data.icon" autocomplete="off"
                    placeholder="请输入类型图标"
                    :maxlength="40" show-word-limit/>
        </el-form-item>
        <el-form-item label="图标颜色" prop="color">
          <el-color-picker v-model="billInfo.billBookDialog.data.color" />
        </el-form-item>
        <el-form-item label="图标预览">
          <i :class="billInfo.billBookDialog.data.icon"
             :style="{color: billInfo.billBookDialog.data.color, fontSize: '24px'}"></i>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useBillStore } from '@/store/bill.ts'
import { ElMessage, FormRules } from 'element-plus'
import { IBillBook } from '@/types/bill.ts'
import { billBookRules } from '@/utils/element/elRules.ts'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import type { IDialog, IHandleApi } from 'vue3-common/types'
import { addBillBookApi, updateBillBookApi } from '@/apis/bill.ts'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'

const formRef = ref()
const rules = reactive<FormRules>(billBookRules)
const billStore = useBillStore()

const billInfo = reactive({
  setBillBookType: 'ADD' as IHandleApi,
  billBookDialog: {
    title: '',
    visible: false,
    data: {}
  } as IDialog<IBillBook>
})

onMounted(async () => {
  await billStore.queryBillBook()
})

/**
 * 点击新增账本按钮
 */
const addNewBookClick = () => {
  billInfo.setBillBookType = 'ADD'
  billInfo.billBookDialog = {
    title: '新增账本',
    visible: true,
    data: {
      name: '',
      icon: '',
      color: ''
    }
  }
}

/**
 * 点击编辑账本按钮
 * @param book 账本
 */
const editBookClick = async (book: IBillBook) => {
  billInfo.setBillBookType = 'UPDATE'
  billInfo.billBookDialog = {
    title: '编辑账本',
    visible: true,
    data: deepCopyObject(book)
  }
}

/**
 * 点击删除账本按钮
 * @param book 账本
 */
const deleteBookClick = (book: IBillBook) => {
  billInfo.setBillBookType = 'DELETE'
  ElMessage.error('暂不支持该功能')
}

const openDialogEvent = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

const setBillBookApi = async (id?: number) => {
  switch (billInfo.setBillBookType) {
    case 'ADD':
      await addBillBookApi(billInfo.billBookDialog.data)
      ElMessage.success('新增账本成功')
      break
    case 'UPDATE':
      await updateBillBookApi(id as number, billInfo.billBookDialog.data)
      ElMessage.success('更新账本成功')
      break
    case 'DELETE':
      ElMessage.success('删除账本成功')
      break
    default:
      break
  }
  await billStore.queryBillBook()
  billInfo.billBookDialog.visible = false
}

const cancelClick = () => {
  billInfo.billBookDialog.visible = false
}

const confirmClick = async () => {
  await formRef.value.validate(async (valid) => {
    if (valid) {
      await setBillBookApi(billInfo.billBookDialog.data.id)
    }
  })
}
</script>
